<template>
  <div class="app-container">
    <el-card class="box-card" style="background-color: #e9ecef">
      <div slot="header" class="clearfix">
        <span style="font-size: xx-large">{{ title }}</span>
      </div>
      <el-table
        :data="replyInfo"
        style="width: 100%">
        <el-table-column prop="key" label="配置项"/>
        <el-table-column prop="value" label="配置值"/>
      </el-table>
      <el-divider/>
      <p v-if="replyData[0] !== 0 && replyData[0] !== replyData[2] - 1">共需{{ replyData[0] }}个学生答辩，当前已有
        {{ replyData[1] }}
        个学生报名答辩，下个答辩学生序号为{{ replyData[2] }}。点击
        <router-link
          :to="{path: '/teacher/list', query: {
            replyId: this.$route.query.replyId
          }}"
          style="color: rgb(64, 158, 255)">
          查看详情
        </router-link>
        。
      </p>
      <p v-if="replyData[0] === replyData[2] - 1">共需{{ replyData[0] }}个学生答辩，当前已全部报名答辩。点击
        <router-link
          :to="{path: '/teacher/list', query: {
            replyId: this.$route.query.replyId
          }}"
          style="color: rgb(64, 158, 255);">
          查看详情
        </router-link>
        。
      </p>
    </el-card>
  </div>
</template>

<script>
import teacherReplyApi from '@/api/teacher/reply'

export default {
  data() {
    return {
      title: '',
      replyInfo: null,
      replyGroup: null,
      replyData: [0, 0, 0]
    }
  },
  created() {
    this.getReplyInfo()
  },
  methods: {
    getReplyInfo() {
      teacherReplyApi.getReplyById(this.$route.query.replyId).then(res => {
        this.title = res.result.title
        this.getReplyGroup(res.result)
        this.getReplyData()
      }).catch(error => {
        console.log(error)
      })
    },
    getReplyData() {
      teacherReplyApi.getDataById(this.$route.query.replyId).then(res => {
        this.replyData = res.result
      }).catch(error => {
        console.log(error)
      })
    },
    getReplyGroup(data) {
      teacherReplyApi.getGroupById(data.groupId).then(res => {
        this.replyGroup = res.result.members.map(info => info.name).toString()
        this.replyInfo = [
          {
            key: '教师小组',
            value: data.groupName + '（' + this.replyGroup + '）'
          },
          {
            key: '开始时间',
            value: data.startTime
          },
          {
            key: '结束时间',
            value: data.endTime
          },
          {
            key: '学生匿名打分权重',
            value: data.weight + '%'
          },
          {
            key: '学生自评',
            value: data.selfMark === 1 ? '是' : '否'
          },
          {
            key: '成绩分析',
            value: data.visible === 1 ? '是' : '否'
          },
          {
            key: '答辩年限',
            value: data.config
          }
        ]
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

